@font-face {
    font-family: MilkyExtralight;
    src: url('../fonts/FontStylelighter.ttf');
}
@keyframes VRLoop {
    from
    {
        background-position: 0 0 ;
    }
    to
    {
        background-position:0 100% ;
    }
}
@keyframes ArrowLoop{
    from
    {
        background-position: 0 0;
    }
    to
    {
        background-position: 0 100%;
    }
}
@keyframes OrderStateProcessing{
    0%{transform:scale(.8);opacity:.5}
    to{transform:scale(2.4);opacity:0}
}
.HeadNavi
{
    width           : 100%;
    background-color: rgb(30, 32, 33);
    >div{
        width          : 1200px;
        height         : 40px;
        margin         : 0 auto;
        display        : flex;
        justify-content: space-between;
        box-sizing     : border-box;
        >ul
        {
            display: flex;
            li
            {
                line-height : 40px;
                margin-right: 20px;
                &>a{
                    color: #9b9b9b;
                    &:hover{
                        color: white;
                    }
                }
            }
        }
    }
}
.AppIconTitle
{
    display        : flex;
    justify-content: space-between;
    width          : 150px;
    user-select    : none;
    >img
    {
        width : 40px;
        height: 40px;
    }
    >span
    {
        // font-family: "MilkyExtralight";
        font-size  : 25px;
        font-weight: bold;
        line-height: 40px;
        color      : #407BFF;
    }
}
.VRAnimation
{
    position     : absolute;
    height       : 50px;
    width        : 50px;
    overflow     : hidden;
    border       : 1px solid white;
    border-radius: 50%;
    background   : url('../img/vr-animation.png') no-repeat;
    animation    : VRLoop 3.5s steps(53) infinite;
}
.VerifyIcon
{
    display        : inline-block;
    vertical-align: middle;
    background     : url("../img/verify_icon.png") no-repeat;
    background-size: 100% 100%;
    width          : 13px;
    height         : 15px;
}
.VRNextSceneArrow
{
    background     : url("../img/next-scene.png") no-repeat;
    width          : 50px;
    height         : 50px;
    background-size: 100%;
    animation      : ArrowLoop 1.5s steps(24) infinite;
    position       : relative;
    cursor         : pointer;
    // overflow       : hidden;
    .VRSceneTagName
    {
        width           : 100%;
        color           : white;
        background-color: rgba(1,1,1,0.4);
        border-radius   : 5px;
        position        : absolute;
        bottom          : -15px;
        text-align      : center;
        user-select     : none;
    }
}
.Footer
{
    width         : 100%;
    max-width     : 1200px;
    margin        : 0 auto;
    display       : flex;
    flex-direction: column;
    >h1
    {
        font-weight: bold;
        color      : rgb(34, 34, 34);
        font-size  : 22px;
    }
    >button:hover span
    {
        text-decoration: underline;
    }
    .F_Assure
    {
        display        : flex;
        flex-direction : row;
        >div
        {
            display     : flex;
            align-items : center;
            margin-right: 30px;
            max-width   : 300px;
            >img
            {
                margin-right: 10px;
            }
            p
            {
                margin: 0;
                span
                {
                    font-weight: bold;
                    color      : rgb(72,72,72);
                }
            }
        }
    }
    .FooterInfo
    {
        display        : flex;
        align-items    : center;
    }
    .YoudeMeiDe
    {
        width         : 100%;
        display       : flex;
        flex-direction: row;
        justify-content: space-around;
        >div
        {
            h4
            {
                font-weight: bold;
                text-align: center;
            }
            display       : flex;
            flex-direction: column;
            >button
            {
                font-weight: bold;
            }
        }
    }
}
.FullSecurity
{
    .ant-modal-content
    {
        box-sizing: border-box;
        padding   : 30px;
        .ant-modal-body
        {
            overflow:hidden;
        }
        .ant-modal-close
        {
            button
            {
                border-radius: 100%;
                box-shadow   : 0 0 3px rgba(1,1,1,0.4);
            }
        }
        .FullSecurityContent
        {
            max-height     : 550px;
            overflow       : auto;
            position       : relative;
            scroll-behavior: smooth;
            >h1
            {
                font-weight  : bold;
                font-size    : 45px;
                margin-bottom: 30px;
                >p
                {
                    font-weight: normal;
                    font-size  : 18px;
                }
            }
            .ant-tabs
            {
                position        : sticky;
                position        : -webkit-sticky;
                top             : 0;
                background-color: white;
            }
            .ant-tabs-tab-btn
            {
                font-weight: bold;
            }
            .TabHouseSecurity
            {
                display       : flex;
                flex-direction: column;
                >div
                {
                    display        : flex;
                    width          : 100%;
                    justify-content: space-between;
                    margin-bottom  : 30px;
                    >img
                    {
                        width : 400px;
                        height: 320px;
                    }
                    >div
                    {
                        width         : 100%;
                        display       : flex;
                        flex-direction: column;
                        >h1
                        {
                            font-size  : 24px;
                            font-weight: bold;
                            color      : rgb(72, 72, 72);
                            >p
                            {
                                font-weight: normal;
                                font-size  : 15px;
                            }
                        }
                        >div
                        {
                            font-size    : 15px;
                            color        : rgb(72, 72, 72);
                            margin-bottom: 30px;
                            >span
                            {
                                font-size  : 18px;
                                font-weight: bold;
                                display    : block;
                            }
                        }
                    }
                }
            }
        }
    }
}
#nprogress {
    .bar{
        background: #1890ff;
    }
    .spinner{
        top:50px;
    }
    .spinner-icon {
        border-top-color : #1890ff;
        border-left-color: #1890ff;
    }
}

.StateIcon
{
    display       : flex;
    flex-direction: row;
    align-items   : center;
    >div
    {
        margin-left: 5px;
    }
    >span
    {
        display         : flex;
        justify-content : center;
        align-items     : center;
        width           : 6px;
        height          : 6px;
        background-color: #1890ff;
        border-radius   : 100%;
        position: relative;
        &::after{
            width        : 100%;
            height       : 100%;
            border-radius: 100%;
            border       : 1px solid #1890ff;
            content      : '';
            position     : absolute;
            animation    : OrderStateProcessing 1.2s ease-in-out infinite;
        }
    }
}
.StateIconError
{
    @extend .StateIcon;
    >span
    {
        background-color: #ff4d4f;
        &::after
        {
            border: 1px solid #ff4d4f;
        }
    }
}
.StateIconClose
{
    @extend .StateIcon;
    >span
    {
        background-color: #d9d9d9;
        &::after
        {
            border: 1px solid #d9d9d9;
        }
    }
}
.StateIconProcessing
{
    @extend .StateIcon;
    >span
    {
        background-color: #52c41a;
        &::after
        {
            border: 1px solid #52c41a;
        }
    }
}
.SelfCheckBox
{
    label
    {
        width           : 290px;
        height          : 45px;
        color           : white;
        font-weight     : bold;
        display         : block;
        box-sizing      : border-box;
        padding         : 0 10px;
        transition      : all .2s ease-in-out;
        line-height     : 45px;
        box-shadow      : inset 0 0 0 1px rgb(16 22 26 / 20%), 0 2px 4px rgb(16 22 26 / 10%), 0 8px 24px rgb(16 22 26 / 20%);
    }
    input[type="checkbox"]
    {
        display: none;
    }
    input[type="checkbox"]:hover + label
    {
        width: 310px;
    }
    input[type="checkbox"]:checked + label
    {
        width: 310px;
    }
}

.RepairItem
{
    >label
    {
        display        : inline-flex;
        flex-direction : column;
        justify-content: center;
        align-items    : center;
        font-weight    : bold;
        user-select    : none;
        img
        {
            width : 45px;
            height: 45px;
        }
    }
    input[type="checkbox"]
    {
        display: none;
    }
    input[type="checkbox"]:not(:checked) +label
    {
        color: lightgray;
    }
    input[type="checkbox"]:checked + label>img:nth-child(1)
    {
        display: none;
    }
    input[type="checkbox"]:not(:checked) + label>img:nth-child(2)
    {
        display: none;
    }
}
